<template>
  <div class="lineEcharts">
    <div style="width:600px;height:500px">
      <Echart :echartObj="echartObj" />
    </div>
    <div style="width:800px;height:800px">
      <moveBarEcharts :echartObj="echartObjBar" />
    </div>
    <div class="kuanAuto">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import Echart from '@/components/echarts/index.vue'
import moveBarEcharts from '@/components/echarts/moveBarEcharts'
export default {
  name: 'lineEcharts',
  data() {
    return {
      echartObj: {},
      echartObjBar: {}
    }
  },
  components: {
    Echart,
    moveBarEcharts
  },
  mounted() {
    this.showEcharts()
    this.showEchartsBar()
  },
  methods: {
    showEcharts() {
      //数据
      var XName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      var data1 = [
        [123, 154, 234, 321, 120, 390, 634],
        [63, 194, 234, 321, 278, 110, 534],
        [53, 254, 234, 321, 118, 240, 434],
        [23, 354, 334, 221, 178, 190, 234]
      ]
      var Line = ['云篆山水路线', '昕博朗学校路线', '新华小学路线', '云锦五路路线']
      var img = [
        'image://',
        'image://',
        'image://',
        'image://'
      ]
      var color = ['#00f8ff', '#00f15a', '#0696f9', '#dcf776']

      //数据处理
      var datas = []
      Line.map((item, index) => {
        datas.push({
          symbolSize: 150,
          symbol: img[index],
          name: item,
          type: 'line',
          yAxisIndex: 1,
          data: data1[index],
          itemStyle: {
            normal: {
              borderWidth: 5,
              color: color[index]
            }
          }
        })
      })
      this.echartObj = {
        backgroundColor: '#0e2147',
        grid: {
          left: '10%',
          top: '15%',
          bottom: '15%',
          right: '5%'
        },
        legend: {
          type: 'scroll',
          data: Line,
          itemWidth: 18,
          itemHeight: 40,
          textStyle: {
            color: '#00ffff',
            fontSize: 14
          }
        },
        yAxis: [
          {
            type: 'value',
            position: 'right',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'value',
            position: 'left',
            nameTextStyle: {
              color: '#00FFFF'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: 'rgba(135,140,147,0.8)'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              color: '#fff',
              fontSize: 14
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6A989E'
              }
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: '#fff', // x轴颜色
                fontWeight: 'normal',
                fontSize: '14',
                lineHeight: 22
              }
            },
            data: XName
          },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },

            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          }
        ],
        series: datas
      }
    },
    showEchartsBar() {
      this.echartObjBar = {
        backgroundColor: '#323a5e',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['1', '2', '3'],
          right: 10,
          top: 12,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          }
        },

        yAxis: {
          type: 'value',
          max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '8%',
            start: 10,
            end: 90,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: '1',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fccb05'
                  },
                  {
                    offset: 1,
                    color: '#f5804d'
                  }
                ]),
                barBorderRadius: 12
              }
            },
            data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
          },
          {
            name: '2',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#8bd46e'
                  },
                  {
                    offset: 1,
                    color: '#09bcb7'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
          },
          {
            name: '3',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#248ff7'
                  },
                  {
                    offset: 1,
                    color: '#6851f1'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.kuanAuto {
  display: flex;
  justify-content: space-between;
}
.left {
  // flex: 1;
  width: 200px;
  height: 200px;
  background: blue;
}
.right {
   flex: 1;
  // width: calc(100% - 200px);
  height: 200px;
  background: red;
}
</style>
